<div class="container">
    <h1 class="title is-size-1 has-text-centered">Disabling Sorting</h1>
    <p class="mb-4">You can disable sorting with the `Sort` option set to `false`. You can also disable dropping items on a list by setting the `Put` to `false`. In the example below, you can drag from list 1 to list 2, but not from list 2 to list 1. You can sort list 2, but not list 1.</p>
    <Tabs CodeContent="@codeContent">
        <ExampleContent>
            <div class="columns">
                <div class="column">
                    <SortableList Id="disabledOne" Group="disabledSorting" Pull="clone" Put="false" Sort="false" Items="items1" Context="item" OnRemove="ListOneRemove">
                        <SortableItemTemplate>
                            <div class="card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>
                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
                <div class="column">
                    <SortableList Id="disabledTwo" Group="disabledSorting" Pull="clone" Items="items2" Context="item" OnUpdate="SortList">
                        <SortableItemTemplate>
                            <div class=" card has-border-dark has-background-white">
                                <p class="is-size-4 p-2 ml-4">@item.Name</p>

                            </div>
                        </SortableItemTemplate>
                    </SortableList>
                </div>
            </div>
        </ExampleContent>
    </Tabs>
</div>

@code {
    private string codeContent = @"
        <SortableList Id=""disabledOne"" Group=""disabledSorting"" Pull=""clone"" Put=""false"" Sort=""false"" Items=""items1"" Context=""item"" OnRemove=""ListOneRemove"">
            <SortableItemTemplate>
                <div class=""card has-border has-background-blazor has-text-white"">
                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>
                </div>
            </SortableItemTemplate>
        </SortableList>
    
        <SortableList Id=""disabledTwo"" Group=""disabledSorting"" Pull=""clone"" Items=""items2"" Context=""item"" OnUpdate=""SortList"">
            <SortableItemTemplate>
                <div class="" card has-border has-background-blazor has-text-white"">
                    <p class=""is-size-4 p-2 ml-4"">@item.Name</p>

                </div>
            </SortableItemTemplate>
        </SortableList>

        @code {{
            private void ListOneRemove((int oldIndex, int newIndex) indices)
            {{
                var item = items1[indices.oldIndex];

                var clone = item;

                items2.Insert(indices.newIndex, clone);
            }}

            private void SortList((int oldIndex, int newIndex) indices)
            {{
                // deconstruct the tuple
                var (oldIndex, newIndex) = indices;

                var items = this.items2;
                var itemToMove = items[oldIndex];
                items.RemoveAt(oldIndex);

                if (newIndex < items2.Count)
                {{
                    items.Insert(newIndex, itemToMove);
                }}
                else
                {{
                    items.Add(itemToMove);
                }}

                StateHasChanged();
            }}
        }}";

    public List<Item> items1 = Enumerable.Range(1, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    public List<Item> items2 = Enumerable.Range(11, 10).Select(i => new Item { Id = i, Name = $"Item {i}" }).ToList();

    private void ListOneRemove((int oldIndex, int newIndex) indices)
    {
        var item = items1[indices.oldIndex];

        var clone = item;

        items2.Insert(indices.newIndex, clone);
    }

    private void SortList((int oldIndex, int newIndex) indices)
    {
        // deconstruct the tuple
        var (oldIndex, newIndex) = indices;

        var items = this.items2;
        var itemToMove = items[oldIndex];
        items.RemoveAt(oldIndex);

        if (newIndex < items2.Count)
        {
            items.Insert(newIndex, itemToMove);
        }
        else
        {
            items.Add(itemToMove);
        }

        StateHasChanged();
    }

}